<template>
	<h1>首页生命周期的home</h1>
	<hr />
	<div id="box"></div>
	{{ str }}
	<button @click="update">修改</button>
	<router-link to="/about">跳转页面(页面销毁)</router-link>
</template>

<script setup>
import axios from 'axios';
import { onBeforeUnmount, onUnmounted } from 'vue';
let str = ref('这是数据');
const update = () => {
	str.value = '123';
};
// 请求接口
onBeforeMount(() => {
	// console.log(document.getElementById('box')); //这里获取不到
	axios({
		url: 'http://testapi.xuexiluxian.cn/api/slider/getSliders'
	}).then(res => {
		console.log(res);
	});
});

// 获取DOM
onMounted(() => {
	console.log(document.getElementById('box')); //这里可以
});

// 数据修改前
onBeforeUpdate(() => {
	console.log('修改前');
});

// 数据修改后
onUpdated(() => {
	console.log('修改后');
});

// DOM销毁前
onBeforeUnmount(() => {
	console.log('销毁前');
});

// DOM销毁后
onUnmounted(() => {
	console.log('销毁后');
});
</script>

<style></style>
